<template>
  <div class="activity_details">
      <el-form ref="form" :model="form" :rules="formRules" label-width="140px">
          <el-row :gutter="20">
              <el-col :span="7">
                  <el-form-item label="活动标题:" prop="title">
                        <el-input v-model.trim="form.title" :disabled="type === 'details'"></el-input>
                    </el-form-item>
              </el-col>
              <el-col :span="7">
                  <el-form-item label="扣除的积分/次数:" prop="kouchujifen">
                        <el-input v-model.trim="form.kouchujifen" :disabled="type === 'details'"></el-input>
                    </el-form-item>
              </el-col>
              <el-col :span="10">
                  <el-form-item label="活动时间:" prop="dateValue">
                        <el-date-picker
                        v-model.trim="form.dateValue"
                        type="datetimerange"
                        align="right"
                        start-placeholder="开始日期"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        :disabled="type === 'details'">
                        </el-date-picker>
                    </el-form-item>
              </el-col>
          </el-row>
          <el-row :gutter="20" v-for="(item,index) in numArr" :key="index">
              <el-col :span="7">
                  <el-form-item :label="item.label+'等奖:'" :prop="item.class">
                        <el-input v-model.trim="form[item.class]" :disabled="type === 'details'"></el-input>
                    </el-form-item>
              </el-col>
              <el-col :span="7">
                  <el-form-item :label="item.label+'等奖概率:'" :prop="item.nums">
                        <el-input v-model.trim="form[item.nums]" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" :disabled="type === 'details'"></el-input>
                    </el-form-item>
              </el-col>
              <el-col :span="10">
                  <el-form-item :label="item.label+'等奖图片:'" :prop="item.img" class="item-img">
                      <div @click.stop="getImageTypeName(item.img)" v-if="type !== 'details'">
                          <el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res); } " multipleaccept="image/*" > <img v-if="form[item.img]" :src="form[item.img]" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
                      </div>
                      <div class="reset" v-if="type !== 'details'">
                           <el-button type="danger" size="small" @click="reset(item.img)" v-if="form[item.img]">重置</el-button>
					       <div class="el-upload__tip">小于1MB</div>
                      </div>
                      <div v-if="type === 'details'">
                          <img v-if="form[item.img]" :src="form[item.img]" class="avatar" />
                      </div>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-form-item label="活动状态:" prop="status">
                <el-switch v-model.trim="form.status" :active-value="1" :inactive-value="2" :disabled="type === 'details'"></el-switch>
            </el-form-item>
          </el-row>
          <el-row v-if="type !== 'details'">
              <el-form-item>
                  <el-button type="primary" @click="onSUnbmit('form')">提交</el-button>
                  <el-button type="primary" @click="onResetForm('form')">取消</el-button>
              </el-form-item>
              
          </el-row>
      </el-form>
      
  </div>
</template>

<script>
export default {
    props:['layerid','lottery_id','type'],
    data () {
        return {
            form:{
                title:"",
                first:"",
                firstnums:"",
                firstimgs:"",
                second:"",
                secondnums:"",
                secondimgs:"",
                third:"",
                thirdnums:"",
                thirdimgs:"",
                four:"",
                fournums:"",
                fourimgs:"",
                five:"",
                fivenums:"",
                fiveimgs:"",
                six:"",
                sixnums:"",
                siximgs:"",
                seven:"",
                sevennums:"",
                sevenimgs:"",
                eight:"",
                eightnums:"",
                eightimgs:"",
                status:1,
                dateValue:"",
                kouchujifen:""
            },
            numArr:[
                {
                    label:"一",
                   class:"first",
                   nums:"firstnums" ,
                   img:"firstimgs"
                },
                {
                    label:"二",
                    class:"second",
                    nums:"secondnums",
                    img:"secondimgs"
                },
                {
                    label:"三",
                    class:"third",
                    nums:"thirdnums",
                    img:"thirdimgs"
                },
                {
                    label:"四",
                    class:"four",
                    nums:"fournums",
                    img:"fourimgs"
                },
                {
                    label:"五",
                    class:"five",
                    nums:"fivenums",
                    img:"fiveimgs"
                },
                {
                    label:"六",
                    class:"six",
                    nums:"sixnums",
                    img:"siximgs"
                },
                {
                    label:"七",
                    class:"seven",
                    nums:"sevennums",
                    img:"sevenimgs"
                },
                {
                    label:"八",
                    class:"eight",
                    nums:"eightnums",
                    img:"eightimgs"
                }],
            imgKey:"",
            // 校对规则
            formRules: {
                title: [{
                    required: true,
                    message: '请输入活动标题'
                }],
                kouchujifen: [{
                    required: true,
                    message: '请输入扣除的积分/次数'
                }],
                dateValue: [{
                    required: true,
                    message: '请选择开始日期'
                }],
                first: [{
                    required: true,
                    message: '请输入一等奖名称'
                }],
                firstnums: [{
                    required: true,
                    message: '请输入一等奖概率'
                }],
                firstimgs: [{
                    required: true,
                    message: '请上传一等奖图片'
                }],
                second: [{
                    required: true,
                    message: '请输入二等奖名称'
                }],
                secondnums: [{
                    required: true,
                    message: '请输入二等奖概率'
                }],
                secondimgs: [{
                    required: true,
                    message: '请上传二等奖图片'
                }],
                third: [{
                    required: true,
                    message: '请输入三等奖名称'
                }],
                thirdimgs: [{
                    required: true,
                    message: '请上传三等奖图片'
                }],
                thirdnums: [{
                    required: true,
                    message: '请输入三等奖概率'
                }],
                four: [{
                    required: true,
                    message: '请输入四等奖名称'
                }],
                fournums: [{
                    required: true,
                    message: '请输入四等奖概率'
                }],
                fourimgs: [{
                    required: true,
                    message: '请上传四等奖图片'
                }],
                five: [{
                    required: true,
                    message: '请输入五等奖名称'
                }],
                fivenums: [{
                    required: true,
                    message: '请输入五等奖概率'
                }],
                fiveimgs: [{
                    required: true,
                    message: '请上传五等奖图片'
                }],
                six: [{
                    required: true,
                    message: '请输入六等奖名称'
                }],
                sixnums: [{
                    required: true,
                    message: '请输入六等奖概率'
                }],
                siximgs: [{
                    required: true,
                    message: '请上传六等奖图片'
                }],
                seven: [{
                    required: true,
                    message: '请输入七等奖名称'
                }],
                sevennums: [{
                    required: true,
                    message: '请输入七等奖概率'
                }],
                sevenimgs: [{
                    required: true,
                    message: '请上传七等奖图片'
                }],
                eight: [{
                    required: true,
                    message: '请输入八等奖名称'
                }],
                eightnums: [{
                    required: true,
                    message: '请输入八等奖概率'
                }],
                eightimgs: [{
                    required: true,
                    message: '请上传八等奖图片'
                }],
                status: [{
                    required: true,
                    message: '请选择活动状态'
                }],
            }
        }
    },
    methods: {
        // 提交
        onSUnbmit(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    let date = this.form.dateValue;
                    this.$set(this.form,'start_time',date[0]);
                    this.$set(this.form,'end_time',date[1]);
                    this.$delete(this.form,'dateValue');
                    if(this.type === 'add'){
                        this.$http(this.$ApiList.UpLottery,this.form).then(res=>{
                            this.$refs[formName].resetFields();
                            this.$message.success(res.datas);
                            this.$layer.close(this.layerid);
                            this.$parent.init(1)
                        })
                    }else if(this.type === 'edit'){
                        this.$set(this.form,'lottery_id',this.lottery_id);
                        this.$delete(this.form,'add_time');
                        this.$http(this.$ApiList.UpdateLottery,this.form).then(res=>{
                            this.$refs[formName].resetFields();
                            this.$message.success(res.datas);
                            this.$layer.close(this.layerid);
                            this.$parent.init(1);
                        })
                    }
                    
                }
            })
        },
        // 取消
        onResetForm(formName){
            this.$refs[formName].resetFields();
            this.$layer.close(this.layerid);
        },
        // 上传图片
        upload(params) {
			const file = params.file,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt1MB = file.size / 1024 <= 1024;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt1MB) {
				this.$message.error('图片不能大于1MB');
				return;
			}
			let image = new FormData();
			image.append('file[]', file);
			this.$http(this.$ApiList.publicUpload, image).then(res => {
				this.form[this.imgKey] = res.datas[0];
			});
		},
        // 获取img
        getImageTypeName(img){
            this.imgKey = img;
        },
        // 重置图片
        reset(imgKey){
            this.form[imgKey] = "";
        }
    },
    mounted () {
        if(this.type === 'details' || this.type === 'edit'){
            this.$http(this.$ApiList.LotteryInfo,{lottery_id:this.lottery_id}).then(res=>{
                this.form = res.datas;
                let date = [];
                date.push(res.datas.start_time);
                date.push(res.datas.end_time);
                this.$set(this.form,'dateValue',date);
                this.$delete(this.form,'start_time');
                this.$delete(this.form,'end_time');
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.activity_details{
    width: 100%;
    padding: 20px;
    .item-img{
        /deep/.el-form-item__content{
            display: flex;
            .reset{
                margin-left: 20px;
            }
        }
    }
}
</style>